<template>
    <div class="register">
        <div class="item-content">
            <img src="/images/bg.jpg" style="width: 100%;">
        </div>
        <div class="item-input">
            <van-field clearable label="手机号码" placeholder="请输入您的手机号码" required v-model="mobile"/>
            <van-field center clearable label="短信验证码" placeholder="输入手机验证码" required v-model="smsCode">
                <van-button
                        :disabled="!btnStatus"
                        @click="btnStatus&&sendSmsCode('reg');"
                        size="small"
                        slot="button"
                        type="primary"
                >{{smsText}}</van-button>
            </van-field>
            <van-field
                    :disabled="disableValue"
                    clearable
                    label="推荐人手机"
                    placeholder="非必填"
                    v-model="recommendMobile"
            />
            <br>
            <van-button @click="register" class="save-button-park main-theme-color" size="large">提交</van-button>
            <br>
            <van-button @click="goToView('/parking_pay')" class="save-button-park main-theme-color" size="large">免登陆，缴费离场</van-button>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue'
    import { mapGetters, mapMutations } from 'vuex'
    import { Toast } from 'vant'
    import Cookies from 'js-cookie'
    import { getUrlHash } from '@/utils/tools'
    Vue.use(Toast)
    export default {
        name: 'Register',
        data() {
            return {
                mobile: '',
                smsCode: '',
                recommendMobile: '',
                smsText: '获取验证码',
                token: '',
                time: 300,
                btnStatus: true,
                userId: ''
            }
        },

        mounted() {
            this.token = Cookies.get('token')
            if (Cookies.get('share_mobile')) {
                this.recommendMobile = Cookies.get('share_mobile') || ''
                Cookies.remove('share_mobile')
            }

            console.log(this.userInfo.mobile)

            if (!this.userInfo.mobile) {
                Toast('绑定手机号码可获取更多权益哦')
            } else {
                this.$router.push('/parking_pay')
            }

        },
        computed: {
            ...mapGetters(['userInfo', 'toUrl', 'blackRouters']),
            disableValue() {
                let flag = false
                if (this.recommendMobile && this.recommendMobile.indexOf('*') != -1) {
                    flag = true
                }
                return flag
            }
        },
        methods: {
            ...mapMutations(['setUserInfo']),
            sendSmsCode(smstype) {
                var phone_pattern = /^0?(1[0-9])[0-9]{9}$/
                if (
                    this.mobile == null ||
                    !phone_pattern.test(this.mobile) ||
                    this.mobile == ''
                ) {
                    Toast('请输入正确的手机号码，例如：13500000000')
                    return
                }
                this.$api.personInf
                    .sendSms({ openid: this.token, mobile: this.mobile, smstype: smstype })
                    .then(res => {
                        if (res.code == 0) {
                            var data = res.data
                            var flag = data.flag
                            var msg = data.msg
                            this.time = data.seconds
                            if (flag) {
                                Toast(msg)
                                this.fun_timedownn()
                            } else {
                                this.smsText = '重新获取'
                                Toast(msg)
                            }
                        }
                    })
                    .catch(err => {
                        console.log(err)
                    })
            },
            fun_timedownn() {
                let timer = window.setInterval(() => {
                    this.time--
                    if (this.time < 0) {
                        window.clearInterval(timer)
                        this.smsText = '重新获取'
                        this.btnStatus = true
                    } else {
                        this.smsText = this.time + '秒'
                        this.btnStatus = false
                    }
                }, 1000)
            },
            register() {
                let phone_pattern = /^0?(1[0-9])[0-9]{9}$/
                if (
                    this.mobile == null ||
                    !phone_pattern.test(this.mobile) ||
                    this.mobile == ''
                ) {
                    Toast('请输入正确的手机号码，例如：13500000000')
                    return
                }
                if (this.smsCode == null || this.smsCode == '') {
                    Toast('请输入手机验证码')
                    return
                }
                console.log(this.userId)
                if (this.userId == null || this.userId == '') {
                    if (
                        this.recommendMobile != null &&
                        !phone_pattern.test(this.recommendMobile) &&
                        this.recommendMobile != ''
                    ) {
                        Toast('请输入正确的推荐人手机号码，例如：13500000000')
                        return
                    }
                }

                this.$api.personInf
                    .personRegister({
                        openid: this.token,
                        mobile: this.mobile,
                        smsCode: this.smsCode,
                        recommendMobile: this.recommendMobile || '',
                        userId: this.userId || ''
                    })
                    .then(res => {
                        if (res.code == 0) {
                            Toast.success('注册成功！')
                            console.log('注册', res.data.userInfo)
                            this.setUserInfo(res.data.userInfo)
                            setTimeout(() => {
                                    this.goToView('/parking_pay')
                            }, 2000)
                        } else {
                            Toast(res.msg)
                        }
                    })
                    .catch(err => {
                        console.log(err)
                    })
            },
            goToView(path) {
                this.$router.push(path)
            }
        },
        // beforeRouteEnter(to, from, next) {
        //   next(vm => {
        //   })
        // }
    }
</script>

<style lang="less">
    @import '../../assets/less/base';
    .main-theme-color {
        background-color: @main-theme-color;
    }
    .item-content {
    }

    .item-input {
        margin: 0.75rem;
    }

    .save-button-park {
        line-height: 38px;
        color: #fff;
        font-size: 14px;
        height: 38px;
        border: none;
        text-decoration: none;
        text-align: center;
        display: block;
        border-radius: 0.25rem;
        box-sizing: border-box;
        -webkit-appearance: none;
        padding: 0 0.5rem;
        margin: 0;
        white-space: nowrap;
        position: relative;
        text-overflow: ellipsis;
        font-family: inherit;
        cursor: pointer;
    }
</style>
